<!-- 第三方平台维护 -->
<template>
  <el-dialog v-if="props.show" :model-value="props.show" title="第三方平台ID维护" :close-on-click-modal="false"
    :close-on-press-escape="false" width="70%" top="12vh" @close="onHideDetails">
    <SearchTable v-loading="indexStore.moduleLoading" :query="data.query" :list="data.list" :total="data.total" :showForm="false" :showPanel="true"
      @changeSize="changeSize" @changePage="changePage" @search="getSearchList">
      <template #form></template>
      <template #button>
        <!-- <el-button type="success" v-permiss="'/system/destroyManager'" size="small" @click="data.isShowDetails = true">
          新增三方平台ID
        </el-button> -->
      </template>
      <template #table>
        <template v-for="(item, index) in data.fields" :key="index">
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip>
            <template v-if="item.prop == 'platform_type'" #default="scope">
              <el-tag>{{ selectToLabel(data.typeList, scope.row.platform_type) }}</el-tag>
            </template>
            <template v-if="item.prop == 'wallet_type'" #default="scope">
              <el-tag>{{ selectToLabel(APITYPEShow, scope.row.wallet_type) }}</el-tag>
            </template>
            <template v-if="item.prop == 'is_test'" #default="scope">
              <el-tag :type="scope.row.is_test ? 'success' : 'danger'">{{ scope.row.is_test ? '测试配置' : '否' }}</el-tag>
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template #default="scope">
            <el-button type="warning" v-permiss="'/system/destroyManager'" size="small"
              @click="data.isShowDetails = true, data.formParams = scope.row">
              编 辑
            </el-button>
            <el-button type="danger" v-permiss="'/system/destroyManager'" size="small"
              @click="deletePlatform(scope.row)">
              删 除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </SearchTable>
    <!-- 新增-修改 -->
    <el-dialog v-model="data.isShowDetails" title="第三方平台ID" :close-on-click-modal="false" :close-on-press-escape="false"
      width="50%" top="15vh" @close="data.isShowDetails = false">
      <el-form ref="ruleFormRef" :model="data.formParams" :inline="true" :rules="rules" :scroll-to-error="true">
      <form-item title="平台名称" :pass="true" value="name">
        <el-input v-model="data.formParams.name" placeholder="平台名称" clearable />
      </form-item>
      <form-item title="品牌" value="platform_type">
        <el-input-number :min="0" :max="9999999999999" :precision="0" v-model="data.formParams.platform_type" placeholder="请输入品牌值" clearable controls-position="right"/>
      </form-item>
      <form-item title="钱包类型" value="wallet_type">
        <el-select v-model="data.formParams.wallet_type" placeholder="请选择" filterable>
          <el-option v-for="(item, index) in APITYPEShow" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </form-item>
      <form-item title="APPID" :pass="true" value="app_id">
        <el-input class="formItem320" v-model="data.formParams.app_id" placeholder="APPID" clearable />
      </form-item>
      <form-item title="加密密钥" value="app_key">
        <el-input class="formItem320" v-model="data.formParams.app_key" placeholder="加密密钥" clearable />
      </form-item>
      <form-item title="接口域名" value="domain">
        <el-input class="formItem320" v-model="data.formParams.domain" placeholder="接口域名" clearable />
      </form-item>
      <form-item title="aes加密向量" value="aes_iv">
        <el-input class="formItem320" v-model="data.formParams.aes_iv" placeholder="aes加密向量" clearable />
      </form-item>
      <form-item title="签名密钥" value="sign_key">
        <el-input class="formItem320" v-model="data.formParams.sign_key" placeholder="签名密钥" clearable />
      </form-item>
      <form-item title="是否是测试配置" value="is_test">
        <el-radio-group v-model="data.formParams.is_test" size="large">
          <el-radio-button label="否" :value="false" />
          <el-radio-button label="测试配置" :value="true" />
        </el-radio-group>
      </form-item>
    </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="data.isShowDetails = false">取 消</el-button>
          <el-button type="primary" @click="gameSet(ruleFormRef)">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, nextTick } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { APITYPEShow } from '@/config/eunm'
import {
  getThirdPlatform,
  addThirdPlatform,
  editThirdPlatform,
  delThirdPlatform
} from '@/api/config'
import { throttle, selectToLabel } from '@/utils/index'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
})

watch(
  () => props.show,
  async (value) => {
    if (value) {
      getSearchList()
    }
  },
)

const data = reactive({
  query: {
    page: 1,
    size: 50,
  },
  list: [],
  total: 0,
  isShowDetails: false,
  fields: [
    { label: '平台名称', prop: 'name', width: '150' },
    { label: '平台类型', prop: 'platform_type', width: '' },
    { label: '钱包类型', prop: 'wallet_type', width: '' },
    { label: 'APPID', prop: 'app_id', width: '' },
    { label: '加密秘钥', prop: 'app_key', width: '' },
    { label: '接口域名', prop: 'domain', width: '' },
    { label: 'aes加密向量', prop: 'aes_iv', width: '' },
    { label: '签名秘钥', prop: 'sign_key', width: '' },
    { label: '是否测试配置', prop: 'is_test', width: '' },
  ],
  formParams: {
    name: '',
    platform_type: 0,
    wallet_type: 1,
    app_id: '',
    app_key: '',
    domain: '',
    aes_iv: '',
    sign_key: '',
    is_test: false,
  } as any,
  typeList: [
    { label: 'MiniGame', value: 1 },
    { label: 'GameUnity', value: 2 },
    { label: 'BBGTgame', value: 3 },
  ],
})

const getSearchList = async () => {
  indexStore.setModuleLoading(true)
  let query = JSON.parse(JSON.stringify(data.query));
  if (query.platform == -1) {
    query.platform = ''
  }
  let res = await getThirdPlatform(query)
  data.list = res.data.list
  data.total = res.data.total
  nextTick(() => {
    indexStore.setModuleLoading(false)
  })
}

// 删除第三方平台
const deletePlatform = async (row:any) => {
  ElMessageBox.confirm(`确定删除【${row.name}】平台`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    await delThirdPlatform(row)
    ElMessage.success('删除成功')
    getSearchList()
  }).catch(() => {})
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data.formParams>>({
  name: [{ required: true, message: '请输入平台名称', trigger: 'blur' }],
  app_id: [{ required: true, message: '请输入平台的APPID', trigger: 'blur' }],
})

const gameSet = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      data.formParams.id ? await editThirdPlatform(data.formParams) : await addThirdPlatform(data.formParams);
      indexStore.getGame() //游戏汇总
      if (data.formParams.id) {
        ElMessage.success('修改成功')
      } else {
        ElMessage.success('新增成功')
      }
      data.isShowDetails = false
      getSearchList()
    }
  })
}, 5000)

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss"></style>
